<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.cls{
				background-color: white;
			}
		</style>
	</head>
	<body class="cls" id="body">
		<input type="button" value="开关" id="btn"/>
		<input type="button" value="修改" id="btn2"/>
		<input type="text" name="" id="input1" />
		<input type="text" name="" id="input2" />
		<ul id="lis">
			<li>网页开关灯</li>
			<li>点击按钮修改p标签颜色</li>
			<li>鹦鹉学舌</li>
			<li>全选与全不选</li>
			<li>隔行变色</li>
		</ul>
		<input type="button" value="隔行变色" id="btn3"/>
		<p id="p">隔壁的妹子</p>
		<input class="hobby" type="checkbox" name="" id="" value="">吃饭</input>
		<input class="hobby" type="checkbox" name="" id="" value="">睡觉</input>
		<input class="hobby" type="checkbox" name="" id="" value="">打豆豆</input>
		<input class="hobby" type="checkbox" name="" id="check_all" value="">全选</input>
		
	</body>
	<script type="text/javascript">
		var btn=document.getElementById('btn');
		btn.onclick=function(){
			var body=document.getElementById('body');
			if(body.style.backgroundColor=='black'){
				body.style.backgroundColor='white';
			}else{
				body.style.backgroundColor='black';
			}
		}

		document.getElementById('btn2').onclick=function(){
			document.getElementById('p').innerHTML='你失败了';
		}

		document.getElementById('input1').oninput=function(){
//			var str=this.value;
			document.getElementById('input2').value=this.value;
		}
		
		document.getElementById('check_all').onchange=function(){
			var status=this.checked;
			var hobbys=document.querySelectorAll('.hobby');
			for (var i=0;i<hobbys.length;i++){
				hobbys[i].checked=status;
			}
		}
		
		document.getElementById('btn3').onclick=function(){
			var lis=document.querySelectorAll('li');
			for(var i=0;i<lis.length;i++){
				if(i %2==0){
					lis[i].style.backgroundColor='gray';
				}else{
					lis[i].style.backgroundColor='red';
				}
			}
		}
	</script>
</html>
